<template>
	<view class="content">
		<swiper class="swiperBox"  autoplay="true" circular="true" v-if="activityData.length>0">
			<swiper-item class="swiperItem" v-for="(item,index) in activityData" :key="index" @click="$navto.navto('/pages/activity_info/activity_info',{id:item.id,type:1})">
				<image :src="item.title_img" class="swiperItem"></image>
			</swiper-item>
		</swiper>
		<view class="previousBox" @click="$navto.navto('/pages/activity_list/activity_list')">
			<text class="label">往期活动 Previous</text>
			<text class="arrow">></text>
		</view>
		<view class="previousScrollBox">
			<view class="previousItem" v-for="(item,index) in activityOldData" :key="index" @click="$navto.navto('/pages/activity_info/activity_info',{id:item.id,type:2})">
				<image :src="item.title_img" class="poster"></image>
				<text class="name ellipsis">{{item.name}}</text>
				<text class="time">{{$timestampToTime(item.start_time)}} - {{$timestampToTime(item.end_time)}}</text>
			</view>
		</view>
		<view class="posterBox">
			<view class="zSwiper">
				<z-swiper v-model="moment" :options="options" ref="zSwiper" @slideChange="onChange">
					<z-swiper-item :custom-style="slideCustomStyle" v-for="(item,index) in moment" :key="index">
						<image class="image" :src="item.path" mode="aspectFill">
						</image>
					</z-swiper-item>
				</z-swiper>
			</view>
			<text class="posterLabel">
				精彩瞬间 Moments
			</text>
			<view class="moreBox" @click="$navto.navto('/pages/activity_moment/activity_moment')">
				<text class="moreArrow">></text>
				<text class="more">MORE</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				options: {
					effect: 'cards',
				},
				slideCustomStyle: {
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
					borderRadius: '36rpx'
				},
				activityData: '',
				activityOldData:'',
				moment:'',
			}
		},
		computed: {
			...mapState(['token']),
		},
		onLoad() {
			if (this.token) {
				this.getData1();
				this.getData2();
				this.getMoment();
			} else {
				this.$store.watch(
					(state) => state.token,
					(newToken) => {
						if (newToken) {
							this.getData1();
							this.getData2();
							this.getMoment();
						}
					}
				);
			}
		},
		methods: {
			// 1是正在进行 2是已结束
			getData1() {
				this.$request.get('activity_list?status=1').then(res => {
					this.activityData = res.data.data;
				})
			},
			getData2() {
				this.$request.get('activity_list?status=2').then(res => {
					this.activityOldData = res.data.data;
				})
			},
			// 精彩瞬间
			getMoment() {
				this.$request.get('overimg_list').then(res => {
					this.moment = res.data.data.slice(0,5);
				})
			},
			onChange() {

			}
		}
	}
</script>
<style lang="scss" scoped>
	.posterBox {
		margin-top: 100rpx;
		width: 100%;
		padding-bottom: 100rpx;
		position: relative;

		.moreBox {
			position: absolute;
			top: 553rpx;
			right: 40rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #121212;
			display: flex;
			flex-direction: column;
			align-items: center;

			.more {
				margin-top: 20rpx;
			}
		}

		.posterLabel {
			position: absolute;
			top: 0;
			right: 40rpx;
			font-weight: 700;
			font-size: 38rpx;
			color: #121212;
			letter-spacing: 4rpx;
			writing-mode: vertical-rl;
		}

		.zSwiper {
			margin-left: 40rpx;
			width: 500rpx;
			height: 600rpx;

			.image {
				height: 600rpx !important;
			}
		}
	}

	.previousScrollBox {
		width: 710rpx;
		margin-left: 40rpx;
		padding-bottom: 100rpx;
		border-bottom: 1rpx solid #DFDFDF;
		overflow-x: scroll;
		margin-top: 70rpx;
		display: flex;

		.previousItem {
			width: 500rpx;
			margin-right: 30rpx;
			display: flex;
			flex-direction: column;

			.time {
				font-weight: 500;
				font-size: 22rpx;
				color: #8E8E8E;
				margin-top: 30rpx;
			}

			.name {
				font-weight: 900;
				width: 100%;
				font-size: 28rpx;
				color: #121212;
				margin-top: 50rpx;
			}

			.poster {
				width: 500rpx;
				height: 350rpx;
			}
		}
	}

	.previousBox {
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.arrow {
			color: #121212;
			font-size: 26rpx;
		}

		.label {
			font-weight: 700;
			font-size: 38rpx;
			color: #121212;
		}
	}

	.swiperBox {
		width: 750rpx;
		height: 700rpx;

		.swiperItem {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
	}
</style>